<template>
  <el-container class="page-container">
    <!-- 侧边栏 -->
    <el-aside class="sidebar">
      <sidebar />
    </el-aside>

    <el-container class="docs-container">
      <!-- 导航栏 -->
      <el-header class="docs-header">
        <navbar />
      </el-header>

      <!-- 中间内容 -->
      <el-main class="content-container">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import sidebar from "./sidebar.vue";
import navbar from "./navbar.vue";
export default {
  name: "docs",
  components: {
    sidebar,
    navbar,
  },
};
</script>

<style lang="scss" scoped>
.page-container {
  height: 100%;
  .sidebar {
    // 侧边栏
    border-right: 1px solid #eee;
  }
  .docs-container {
    // 右边主体部分-导航
    .docs-header {
      height: 80px;
      border-bottom: solid 1px #eee;
    }
    // 右边主体部分-中间内容
    .content-container {
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
}
</style>
